.data-view{
	padding: 20rpx;
	.data-info{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-bottom: 40rpx;
		.data-info-title{
			height: 100rpx;
			position: relative;
			.info-title-text{
				position: relative;
				padding-left: 32rpx;
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
			}
			.info-title-background{
				position: absolute;
				left: 30rpx;
				top:46rpx;
				width: 138rpx;
				height: 26rpx;
				background: linear-gradient(270deg, rgba(73,243,210,0) 0%, #23E2A6 100%);
				border-radius: 13rpx;
			}
		}
		.data-info-content{
			position: relative;
			padding: 10rpx 40rpx 0 40rpx;
			.content-piece{
				position: relative;
				width: 300rpx;
				height: 120rpx;
				background: #F7F9F8;
				border-radius: 10rpx;
				.piece-title{
					position: absolute;
					left:0;
					top:0;
					width: 70rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 10rpx 0rpx 10rpx 0rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
				}
				.piece-age{
					background: #D3F9ED;
					color: #1DC691;
				}
				.piece-height{
					background: #D8F3FF;
					color: #1D85C6;
				}
				.piece-title-number{
					font-size: 40rpx;
					font-family: 'din',DINAlternate-Bold, DINAlternate;
					color: #333333;
				}
				.piece-title-unit{
					padding-top: 8rpx;
					padding-left: 10rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
			.content-piece-weight{
				position: relative;
				height: 200rpx;
				background: #F7F9F8;
				border-radius: 10rpx;
				.piece-title{
					position: absolute;
					left:0;
					top:0;
					width: 70rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 10rpx 0rpx 10rpx 0rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
				}
				.piece-weight{
					background: #F1E9FF;
					color: #8661FF;
				}
				.piece-describe{
					padding-top: 20rpx;
					padding-bottom: 10rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
				.piece-current{
					text-align: center;
					padding-bottom: 10rpx;
					.piece-current-number{
						font-size: 40rpx;
						font-family: 'din',DINAlternate-Bold, DINAlternate;
						color: #333333;
					}
					.piece-current-unit{
						padding-left: 10rpx;
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
				.weight-row-below{
					margin-top: -13rpx;
					padding-right: 6rpx;
					.row-below-title{
						padding: 0 20rpx;
						.below-title-text{
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
						.below-title-value{
							.title-value-number{
								font-size: 30rpx;
								font-family: 'din',DINAlternate-Bold, DINAlternate;
								color: #333333;
							}
							.title-value-unit{
								padding-left: 2rpx;
								font-size: 20rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #333333;
							}
						}
					}
					.row-below-progress{
						padding-top: 40rpx;
						flex: 1;
						.progress-bottom{
							position: relative;
							height: 20rpx;
							background: #CDFAED;
							border-radius: 10rpx;
							.progress-complete{
								height: 20rpx;
								background: linear-gradient(90deg, #E0FDF6 0%, #26E2A6 100%);
								box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(23,140,103,0.3);
								border-radius: 15rpx;
								border: 2rpx solid #FFFFFF;
							}
							.progress-indicate{
								width: 38rpx;
								height: 30rpx;
								position:absolute;
								top: -8rpx;
								transform: translateX(-50%);
							}
							.progress-indicate-number{
								width: 60rpx;
								position:absolute;
								left:50%;
								top:-15rpx;
								transform: translate(-50%,-50%);
								
								text-align: center;
								font-size: 20rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #1DC691;
							}
							.progress-indicate-reduce{
								position:absolute;
								top:-34rpx;
								
								width: 180rpx;
								font-size: 22rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}
					}
				}
			}
			.flicker-background{
				position: absolute;
				border-radius: 10rpx;
				z-index: 1;
				
				width: calc(100vw - 116rpx);
				left:38rpx;
				top:18rpx;
				height: 204rpx;
				background: linear-gradient(86deg, rgba(255, 255, 255, 1), rgba(255, 166, 84, 1));
				opacity: 0;
				transition: opacity .7s;
				&.active{
					opacity: 1;
				}
			}
			.content-piece-margin{
				position: relative;
				z-index: 2;
				height: 200rpx;
				background: #F7F9F8;
				border-radius: 10rpx;
				.piece-title{
					position: absolute;
					left:0;
					top:0;
					width: 100rpx;
					background: #D3F9ED;
					color: #1DC691;
					line-height: 40rpx;
					text-align: center;
					border-radius: 10rpx 0rpx 10rpx 0rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
				}
				.piece-margin-left{
					width: 200rpx;
					.margin-left-number{
						font-size: 40rpx;
						font-family: 'din',DINAlternate-Bold, DINAlternate;
						color: #333333;
					}
					.margin-left-unit{
						padding-top:6rpx;
						padding-left:2rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
					
				}
				.piece-margin-right{
					padding:15rpx;
					flex: 1;
					.margin-right-text{
						padding:5rpx 5rpx 5rpx 10rpx;
						width: 100%;
						height: 100%;
						background: #FFFFFF;
						border-radius: 10rpx;
						
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;
					}
				}
			}
			.content-piece-index{
				height: 180rpx;
				border-radius: 10rpx;
				position: relative;
				.piece-title{
					position: absolute;
					top:0;
					left: 0;
					width: 70rpx;
					height: 40rpx;
					border-radius: 10rpx 0rpx 10rpx 0rpx;
					
					text-align: center;
					line-height: 40rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
				}
				.piece-more{
					position: absolute;
					top:0;
					right: 0;
					width: 40rpx;
					height: 40rpx;
					border-radius: 0 10rpx 0 10rpx;
				}
				.piece-index-content{
					padding-top: 48rpx;
					width: 33.33%;
					.index-content-piece{
						
						
						.index-info{
							position: relative;
							width: auto;
							.index-info-mark{
								position: absolute;
								top:-20rpx;
								right: -70rpx;
								width: 70rpx;
								min-height: 40rpx;
								border-radius: 6rpx;
								
								line-height: 40rpx;
								text-align: center;
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
							}
							.index-info-number{
								font-size: 50rpx;
								font-family: 'din',DINAlternate-Bold, DINAlternate;
								color: #333333;
							}
							.index-info-unit{
								padding-top: 18rpx;
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #333333;
							}
						}
						.index-info-title{
							text-align: center;
							padding-top: 10rpx;
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
			.index-overrun{
				background: linear-gradient(360deg, #FFF9F6 0%, #FFF6F2 100%);
			}
			.index-normal{
				background: linear-gradient(180deg, #E4FEF6 0%, #F3FFFB 100%);
			}
			.title-overrun{
				background: #FFE3D9;
				color: #E8612E;
			}
			.title-normal{
				background: #D3F9ED;
				color: #1DC691;
			}
			.more-overrun{
				background: #F9936D;
			}
			.more-normal{
				background: #71EDC6;
			}
		}
		.data-info-advice{
			width: 120rpx;
			height: 40rpx;
			background: #D3F9ED;
			border-radius: 10rpx;
			margin-left: 32rpx;
			
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #1DC691;
			line-height: 40rpx;
		}
		.data-info-text{
			padding:10rpx 30rpx 0 30rpx;
			.info-text-content{
				position: relative;
				padding: 15rpx 25rpx;
				background: #F7F9F8;
				border-radius: 10rpx;
				.text-content-icon{
					position: absolute;
					top:15rpx;
					left: 25rpx;
					width: 32rpx;
					height: 32rpx;
				}
				.text-content-text{
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
		.data-info-motion{
			margin-top: 33rpx;
			
			width: 120rpx;
			height: 40rpx;
			background: #FFEFD9;
			border-radius: 10rpx;
			margin-left: 32rpx;
			
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #E8962E;
			line-height: 40rpx;
		}
	}
}